<!-- Sample Roaming Charges //-->
<div class="roaming-charges popup">
	<div class="title"><label>Roaming Charges</label><sup>RM</sup>5,800.35</div>
	<div class="content">
		<ul>
			<li>
				<h6><label>Calls</label><sup>RM</sup>4000.00</h6>
				<div class="form">
					<form action="#" method="#">
						<fieldset>
							<div>
								<span class="select-custom">
									<select name="calls">
										<option value="">Please select</option>
										<option value="1">Singapore</option>
										<option value="2">Thailand</option>
										<option value="3">Thailand M</option>
									</select>
								</span>
							</div>
						</fieldset>
					</form>
				</div>
			</li>
			<li>
				<h6><label>Data</label><sup>RM</sup>0.30</h6>
				<div class="form">
					<form action="#" method="#">
						<fieldset>
							<div>
								<span class="select-custom">
								<select name="downloadscontent">
									<option value="">Please select</option>
									<option value="1">Singapore</option>
									<option value="2">Thailand</option>
									<option value="3">Thailand M</option>
								</select>
							</span>
							</div>
						</fieldset>
					</form>
				</div></li>
		</ul>
	</div>
	<div class="table">
		<?php /* This should be according to what you click above */ ?>
		<p><label>Calls</label>Premium IDD</p>
		<form action="" method="">
		<div class="table-filter">
			<p><label>Filter</label>
			<span class="select-custom filter">
				<select name="filter">
					<option value="">Select filter</option>
					<option value="datetime">Date &amp; Time</option>
					<option value="from">From</option>
					<option value="to">To</option>
					<option value="number">Number Called</option>
					<option value="duration">Duration</option>
					<option value="total">Total</option>
				</select>
			</span>
			<span class="datetime selector">
				<label for="from">From</label> <input type="text" class="datetimepicker" name="from" /> <label for="to" class="to">to</label> <input type="text" class="datetimepicker" name="from" /> <input type="submit" value="Filter" class="btn small" /><input type="button" value="Group" class="btn group small" />
			</span>
			<span class="from selector">
				<label for="from">From</label> <input type="text" name="from" /> <input type="submit" value="Filter" class="btn small" /><input type="button" value="Group" class="btn group small" />
			</span>
			<span class="to selector">
				<label for="to">To</label> <input type="text" name="to" /> <input type="submit" value="Filter" class="btn small" /><input type="button" value="Group" class="btn group small" />
			</span>
			<span class="number selector">
				<label for="number">Number Called</label> <input type="text" name="number" /> <input type="submit" value="Filter" class="btn small" /><input type="button" value="Group" class="btn group small" />
			</span>
			<span class="duration selector">
				<label for="from">From</label> <input type="text" name="from" /> <label for="to" class="to">to</label> <input type="text" name="to" /> <input type="submit" value="Filter" class="btn small" /><input type="button" value="Group" class="btn group small" />
			</span>
			<span class="total selector">
				<label for="from">From</label> <input type="text" name="from" /> <label for="to" class="to">to</label> <input type="text" name="from" /> <input type="submit" value="Filter" class="btn small" /><input type="button" value="Group" class="btn group small" />
			</span>
			</p>
		</div> <!-- end of filter //-->
		<div class="table-head">
			<table cellpadding="0" cellspacing="0" border="0">
				<thead>
					<tr>
						<th>Date &amp; Time</th>
						<th>From</th>
						<th>To</th>
						<th>Number Called</th>
						<th>Duration</th>
						<th>Total</th>
					</tr>
				</thead>
			</table>
		</div>
		<div class="table-content">
			<table cellpadding="0" cellspacing="0" border="0">
				<tbody>
					<!-- Grouped version //-->
					<tr>
						<td>11.01.2013, 15.34PM</td>
						<td>Central</td>
						<td>Maxis Central</td>
						<td>13200639066781643</td>
						<td class="hide480">00:00:40</td>
						<td><sup>RM</sup>0.30</td>
					</tr>
					<tr class="grouped"> <!-- please only add this class on the LAST row of data in which it is grouped in //-->
						<td>11.01.2013, 15.34PM</td>
						<td>Central</td>
						<td>Maxis Central</td>
						<td>13200639066781643</td>
						<td class="hide480">00:00:40</td>
						<td><sup>RM</sup>0.30</td>
					</tr>
					<?php for ($i = 1; $i <= 4; $i ++) { ?>
					<tr>
						<td>11.01.2013, 15.34PM</td>
						<td>Central</td>
						<td>Maxis Central</td>
						<td>13200639066781643</td>
						<td class="hide480">00:00:40</td>
						<td><sup>RM</sup>0.30</td>
					</tr>
					<tr>
						<td>11.01.2013, 15.34PM</td>
						<td>Central</td>
						<td>Maxis Central</td>
						<td>+6013 2960092 <img src="images/business_phone_book.png" alt="Business Contacts" /></td>
						<td class="hide480">00:00:40</td>
						<td><sup>RM</sup>0.30</td>
					</tr>
					<?php } ?>
				</tbody>
			</table>
		</div>
		<div class="table-pagination">
			<a href="#" class="prev">&lsaquo; Previous</a>
			<span class="select-custom">
				<select name="page">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
				</select>
			</span>
			<a href="#" class="next">Next &rsaquo;</a>
		</div>
		</form>
		<a href="javascript:closeTable();" class="btn grey small">Back</a>
	</div>
</div>
<!-- #Sample Roaming Charges //-->

<script src="js/popup.js"></script>

